<template>
  <div class="wrap">
    <el-table
      :data="tableData"
      style="width: 100%;margin: 15px auto">

      <el-table-column
        label="日期"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yyrq }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yykssj }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="结束时间"
        width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.yyjssj }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="教室楼栋"
        width="200">
        <template slot-scope="scope">
          <span>{{scope.row.jsld}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="教室房号"
        width="200">
        <template slot-scope="scope">
          <span>{{scope.row.jsfh}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope" >
          <el-button
            v-if=" (new Date(`${scope.row.yyrq} ${scope.row.yykssj}`) >= new Date()) && isChecked"
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row, scope)">取消预约</el-button>
          <span v-else>预约过期</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>

  import { seeappointmentmessage, overappointment} from '@/api/teacher'

  export default {

    data() {
      return {
        //111111111111
        tableData: [{
          yyrq: '',
          yykssj: '',
          yyjssj: '',
          jsld:'',
          jsfh: '',
          //不展示该数据 用于结束预约
          yyld: '',
        }],
        currentPage: 1,
        total:1,
        pageSize:5,
        pageNum: 1,
        //判断预约按钮要不要显示出来
        isChecked: true

      }
    },
    created() {
      ////数据请求
      this.test()
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize=val;
        this.test();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.test()
      },
      //
      tips() {
        this.$alert('<strong> 成 功 结 束 预 约 。 </strong>', '操作成功！', {
          dangerouslyUseHTMLString: true
        })
      },
      handleEdit(index, row) {
        // new Date( `${scope.row.yyrq} ${scope.row.yykssj}`) >= new Date()
        // let time = new Date()
        // console.log(`${row.yyrq} ${row.yykssj}`)
        // console.log(row.yyrq+" "+row.yykssj)
        console.log( new Date(row.yykssj) >= new Date())

        this.isChecked = false
        overappointment(row.yyid).then(res => {
          this.test()
          this.tips()
        }).catch(err=> {
          console.log(err,'取消预约失败！')
        })
      },
      //数据请求
      test() {
        seeappointmentmessage(this.pageNum,this.pageSize).then(res =>{
          this.total = res.data.total
          this.tableData = res.data.appintment
          // console.log(this.tableData)
        }).catch(err =>{
          console.log(err,'查看预约失败')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    width: 1400px;
    height: 100%;
    margin-left: 5%;
    margin-top: 2%;
    /*background-color: #3a835d;*/
  }
</style>
